<template>
	<!-- 水害监测页面 -->
	<view>
		<view class="p-10">
			<u-collapse :value="showMoreKeys" ref="collapse">
				<u-collapse-item name="1">
					<template #title>
						<view class="content-item-title"><text class="title-txt">水仓实时数据</text></view>
					</template>
					<my-grid :list="list" decimals="2" col="2" imgHight="40rpx" imgmode="heightFix" />
				</u-collapse-item>

				<u-collapse-item name="2">
					<template #title>
						<view class="content-item-title"><text class="title-txt">水仓液位</text></view>
					</template>
					<view class="charts-box">
						<qiun-data-charts type="line" ontouch :opts="opts" :chartData="chartData" />
					</view>
				</u-collapse-item>

				<u-collapse-item name="3">
					<template #title>
						<view class="content-item-title"><text class="title-txt">排水量统计</text></view>
					</template>
					<my-grid :list="list2" col="2"></my-grid>
					<view class="charts-box m-t-10">
						<qiun-data-charts type="line" ontouch :opts="opts2" :chartData="chartData2" />
					</view>
				</u-collapse-item>
			</u-collapse>
			<up-back-top :scroll-top="scrollTop"></up-back-top>
		</view>
	</view>
</template>

<script setup>
	/**************************************返回顶部*************************************************/
	const scrollTop = ref(0);
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	})

	/**************************************请求数据逻辑*************************************************/
	import {
		getApiFabric,
		getByApiCode
	} from '@/api/customApi'
	const showMoreKeys = ref([1, 2, 3, 4]),
		collapse = ref(null)

	/******************************************************水仓运行状态******************************************/
	const list = ref([{
		img: 'scyw.png',
		key: '水仓液位',
		title: "水仓液位",
		value: "1.51",
		unit: 'M',
	}, {
		img: 'gj.png',
		key: '告警',
		title: "告警",
		value: "正常"
	}, {
		img: 'gl.png',
		key: '管路一',
		title: "管路1",
		value: 0,
		unit: 'm³/H'
	}, {
		img: 'gl.png',
		key: '管路二',
		title: "管路2",
		value: 0,
		unit: 'm³/H'
	}])

	function fn() {
		getByApiCode({
			apiCode: "SSSJ",
			propertyMapping: {
				key: "name",
				val: "value"
			}
		}).then(res => {
			const data = ArrayToObj(res.data);
			list.value.forEach(item => {
				item.value = data[item.key]
			})
			nextTick(() => {
				collapse.value.init()
			})
		})
	}

	/**************************************水仓液位统计*************************************************/
	const current = ref(0),
		opts = {
			color: ["#1179E8"],
			padding: [0, 10, 10, 0],
			enableScroll: true,
			dataLabel: false,
			dataPointShape: false,
			legend: {
				position: 'top',
				margin: 10
			},
			xAxis: {
				disableGrid: true,
				calibration: true,
				labelCount: 2,
				itemCount: 30,
			},
			yAxis: {
				showTitle: true,
				gridType: "dash",
				data: [{
					min: 0,
					title: 'M',
					titleOffsetY: -10,
				}]
			},
			extra: {
				line: {
					type: "curve",
					width: 2,
					activeType: "hollow"
				}
			}
		},
		chartData = ref({})

	function fn2() {
		getByApiCode({
			apiCode: "jsstyjfx",
			propertyMapping: {
				x: "name",
				y: "value",
				s: "type"
			}
		}).then(res => {
			const resData = res.data.reduce((prev, cur) => {
				if (!prev.categories.includes(cur.x)) prev.categories.push(cur.x);
				if (!prev.series[cur.s]) prev.series[cur.s] = [];
				prev.series[cur.s].push(cur.y)
				return prev;
			}, {
				categories: [],
				series: {}
			})
			let series = [];
			for (let [name, data] of Object.entries(resData.series)) {
				series.push({
					name,
					data
				})
			}
			chartData.value = {
				categories: resData.categories,
				series
			}
		})
	}
	/**************************************排水量统计*************************************************/
	const list2 = ref([{
			key: '1',
			title: '今日累计流量',
			value: 0,
			unit: 'm³'
		}, {
			key: '30',
			title: '近30天累计流量',
			value: 0,
			unit: 'm³'
		}]),
		opts2 = {
			...opts,
			color: ["#1179E8", "#FFA500"],
		},
		chartData2 = ref({})

	function fn3() {
		getByApiCode({
			apiCode: "jsstlj",
			propertyMapping: {
				key: "NAME",
				val: "value"
			}
		}).then(res => {
			const data = ArrayToObj(res.data)
			list2.value.forEach(item => {
				item.value = data[item.key]
			})
		})

		getByApiCode({
			apiCode: "ljllzxt",
			propertyMapping: {
				x: "name",
				y: "value",
				s: "type"
			}
		}).then(res => {
			const resData = res.data.reduce((prev, cur) => {
				if (!prev.categories.includes(cur.x)) prev.categories.push(cur.x);
				if (!prev.series[cur.s]) prev.series[cur.s] = [];
				prev.series[cur.s].push(cur.y)
				return prev;
			}, {
				categories: [],
				series: {}
			})
			let series = [];
			for (let [name, data] of Object.entries(resData.series)) {
				series.push({
					name,
					data
				})
			}
			chartData2.value = {
				categories: resData.categories,
				series
			}
		})
	}


	function getServerData(refresh) {
		Promise.all([fn(), fn2(), fn3()]).then(() => {
			if (refresh) {
				nextTick(() => {
					uni.stopPullDownRefresh()
				})
			}
		});
	}

	onShow(() => {
		getServerData()
	})

	onPullDownRefresh(() => {
		getServerData(true)
	})
</script>

<style scoped lang="scss">

</style>